<template>  
  <div class="dialogue-live2d" :id="dialogueID" :style="dialogueStyle"></div>
</template>

<script type="text/ecmascript-6">
import uuid from 'uuid'
import dialogue from 'common/live2d-vue/lib/dialogue'

export default {
    name: 'dialogue',
    data () {
      return {
        dialogueModul:''
      }
    },
    props:{
        dialogueID:{
          type: String,
          default: uuid()
        },
        dialogueStyle: Object,
        customDialogue: Object
    },
    mounted(){
      this.dialogueModul = new dialogue(document.getElementById(this.dialogueID),this.customDialogue)
    },
    methods:{
      showMessage(remark,time=5000){
        this.dialogueModul.showMessage(remark,time)
          .then(()=>this.dialogueModul.hideMessage(time))
      }
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

.dialogue-live2d
  opacity: 0  
  width: 250px
  height: auto 
  min-height: 60px
  margin: 0 0 -25px 20px 
  padding: 5px 10px
  border-radius: 12px
  box-shadow: 0 0 2px 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24)
  font-size: 13px
  color: #212121
  text-overflow: ellipsis
  background-color: #FFFFFF 
  overflow: hidden
  animation common-animation 50s ease-in-out 5s infinite

@keyframes common-animation 
  2%
    transform: translate(.5px,-1.5px) rotate(-.5deg)
  4% 
    transform: translate(.5px,1.5px) rotate(1.5deg)
  6% 
    transform: translate(1.5px,1.5px) rotate(1.5deg)
  8%
    transform: translate(2.5px,1.5px) rotate(.5deg)
  10%
    transform: translate(.5px,2.5px) rotate(.5deg)
  12%
    transform: translate(1.5px,1.5px) rotate(.5deg)
  14%
    transform: translate(.5px,.5px) rotate(.5deg)
  16%
    transform: translate(-1.5px,-.5px) rotate(1.5deg)
  18%
    transform: translate(.5px,.5px) rotate(1.5deg)
  20%
    transform: translate(2.5px,2.5px) rotate(1.5deg)
  22%
    transform: translate(.5px,-1.5px) rotate(1.5deg)
  24%
    transform: translate(-1.5px,1.5px) rotate(-.5deg)
  26%
    transform: translate(1.5px,.5px) rotate(1.5deg)
  28%
    transform: translate(-.5px,-.5px) rotate(-.5deg)
  30%
    transform: translate(1.5px,-.5px) rotate(-.5deg)
  32%
    transform: translate(2.5px,-1.5px) rotate(1.5deg)
  34%
    transform: translate(2.5px,2.5px) rotate(-.5deg)
  36%
    transform: translate(.5px,-1.5px) rotate(.5deg)
  38%
    transform: translate(2.5px,-.5px) rotate(-.5deg)
  40%
    transform: translate(-.5px,2.5px) rotate(.5deg)
  42%
    transform: translate(-1.5px,2.5px) rotate(.5deg)
  44%
    transform: translate(-1.5px,1.5px) rotate(.5deg)
  46%
    transform: translate(1.5px,-.5px) rotate(-.5deg)
  48%
    transform: translate(2.5px,-.5px) rotate(.5deg)
  50%
    transform: translate(-1.5px,1.5px) rotate(.5deg)
  52%
    transform: translate(-.5px,1.5px) rotate(.5deg)
  54%
    transform: translate(-1.5px,1.5px) rotate(.5deg)
  56%
    transform: translate(.5px,2.5px) rotate(1.5deg)
  58%
    transform: translate(2.5px,2.5px) rotate(.5deg)
  60%
    transform: translate(2.5px,-1.5px) rotate(1.5deg)
  62%
    transform: translate(-1.5px,.5px) rotate(1.5deg)
  64%
    transform: translate(-1.5px,1.5px) rotate(1.5deg)
  66%
    transform: translate(.5px,2.5px) rotate(1.5deg)
  68%
    transform: translate(2.5px,-1.5px) rotate(1.5deg)
  70%
    transform: translate(2.5px,2.5px) rotate(.5deg)
  72%
    transform: translate(-.5px,-1.5px) rotate(1.5deg)
  74%
    transform: translate(-1.5px,2.5px) rotate(1.5deg)
  76%
    transform: translate(-1.5px,2.5px) rotate(1.5deg)
  78%
    transform: translate(-1.5px,2.5px) rotate(.5deg)
  80%
    transform: translate(-1.5px,.5px) rotate(-.5deg)
  82%
    transform: translate(-1.5px,.5px) rotate(-.5deg)
  84%
    transform: translate(-.5px,.5px) rotate(1.5deg)
  86%
    transform: translate(2.5px,1.5px) rotate(.5deg)
  88%
    transform: translate(-1.5px,.5px) rotate(1.5deg)
  90%
    transform: translate(-1.5px,-.5px) rotate(-.5deg)
  92%
    transform: translate(-1.5px,-1.5px) rotate(1.5deg)
  94%
    transform: translate(.5px,.5px) rotate(-.5deg)
  96%
    transform: translate(2.5px,-.5px) rotate(-.5deg)
  98%
    transform: translate(-1.5px,-1.5px) rotate(-.5deg)
  0%, 100%
    transform: translate(0,0) rotate(0)
</style>

